import { Col, Form, Input, Modal, Row, Select } from 'antd';


const AddNewStudent = ({ open, onCreate, onCancel, additional }) => {

  const [form] = Form.useForm();

  const must = (value) => {
    return {
      required: true, message: `请输入${value}在提交`,
    }
  }

  const items = [
    { name: "fd_name", label: "姓名", rules: [must('姓名'),], offset: 1, colSpan: 11, span: 9, wrapSpan: 15 },
    { name: "fd_idNum", label: "学号", rules: [must('学号'),], offset: 1, colSpan: 12, span: 7, wrapSpan: 15 },
    { name: "fd_professionalNum", label: "专业", rules: [must('专业'),], offset: 0, colSpan: 12, span: 8, wrapSpan: 15, options: additional.professionals },
    { name: "fd_claNum", label: "班级", rules: [must('班级'),], offset: 1, colSpan: 11, span: 6, wrapSpan: 15, options: additional.classes },
    { name: "fd_phone", label: "手机号", rules: [must('手机号'),], offset: 1, colSpan: 12, span: 8, wrapSpan: 16 },
    { name: "fd_idCard", label: "身份证", rules: [must('身份证'),], offset: 1, colSpan: 19, span: 5, wrapSpan: 14 },
    { name: "fd_address", label: "住址", rules: [must('住址'),], offset: 1, colSpan: 24, span: 4, wrapSpan: 18 },
  ]
  return (
    <Modal
      width={540}
      open={open}
      okText="提交"
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            console.log('Values', values)
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="inline"
        name="form_in_modal"
        wrapperCol={{
          span: 15,
        }}
        className="updata-user-infor"
      >
        <Row gutter={32}>
          {
            items.map(item => {
              return (
                <Col span={item.colSpan} style={{ marginBottom: "25px" }} key={item.name}>
                  <Form.Item
                    style={{ margin: '0px' }}
                    name={item.name}
                    label={item.label}
                    rules={item.rules}
                    labelCol={{
                      span: item.span,
                      offset: 0
                    }}
                    wrapperCol={{
                      span: item.wrapSpan
                    }}
                  >
                    {
                      ["fd_professionalNum", "fd_claNum"].includes(item.name) ?
                        <Select
                          options={item.options}
                          showSearch
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                        /> :
                        <Input />
                    }
                  </Form.Item>
                </Col>
              )
            })
          }
        </Row>
      </Form>
    </Modal>
  );
};
export default AddNewStudent